<template>
  <div class="cases-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>{{ $t('cases.title') }}</h1>
      <p>{{ $t('cases.subtitle') }}</p>
    </div>

    <!-- 案例筛选 -->
    <div class="filter-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <el-select v-model="filters.industry" :placeholder="$t('cases.filters.industry')" clearable>
            <el-option
              v-for="item in industryOptions"
              :key="item.value"
              :label="$t(`cases.industryOptions.${item.value}`)"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-select v-model="filters.productType" :placeholder="$t('cases.filters.productType')" clearable>
            <el-option
              v-for="item in productTypeOptions"
              :key="item.value"
              :label="$t(`cases.productTypeOptions.${item.value}`)"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-select v-model="filters.region" :placeholder="$t('cases.filters.region')" clearable>
            <el-option
              v-for="item in regionOptions"
              :key="item.value"
              :label="$t(`cases.regionOptions.${item.value}`)"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-button type="primary" @click="resetFilters">{{ $t('cases.filters.reset') }}</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 案例列表 -->
    <div class="cases-grid">
      <el-row :gutter="30">
        <el-col 
          v-for="case_item in filteredCases" 
          :key="case_item.id" 
          :xs="24" 
          :sm="12" 
          :md="8"
          :lg="6"
        >
          <el-card class="case-card" :body-style="{ padding: '0px' }" @click="showCaseDetail(case_item)">
            <div class="case-image">
              <img :src="case_item.image" :alt="case_item.title">
              <div class="case-overlay">
                <el-button type="primary" plain>{{ $t('cases.caseCard.viewDetails') }}</el-button>
              </div>
            </div>
            <div class="case-content">
              <h3>{{ case_item.title }}</h3>
              <div class="case-tags">
                <el-tag size="small" type="info">{{ $t(`cases.industryOptions.${case_item.industry}`) }}</el-tag>
                <el-tag size="small" type="success">{{ $t(`cases.productTypeOptions.${case_item.productType}`) }}</el-tag>
                <el-tag size="small" type="warning">{{ $t(`cases.regionOptions.${case_item.region}`) }}</el-tag>
              </div>
              <p class="case-description">{{ case_item.description }}</p>
              <div class="case-footer">
                <span>{{ $t('cases.caseCard.completionDate') }}：{{ case_item.completionDate }}</span>
                <span>{{ $t('cases.caseCard.satisfaction') }}：{{ case_item.satisfaction }}%</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 案例详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="selectedCase?.title"
      width="80%"
      class="case-dialog"
    >
      <div v-if="selectedCase" class="case-detail">
        <div class="detail-header">
          <img :src="selectedCase.image" :alt="selectedCase.title" class="detail-image">
          <div class="detail-info">
            <div class="detail-tags">
              <el-tag type="info">{{ $t(`cases.industryOptions.${selectedCase.industry}`) }}</el-tag>
              <el-tag type="success">{{ $t(`cases.productTypeOptions.${selectedCase.productType}`) }}</el-tag>
              <el-tag type="warning">{{ $t(`cases.regionOptions.${selectedCase.region}`) }}</el-tag>
            </div>
            <div class="detail-meta">
              <p><strong>{{ $t('cases.caseDetail.clientName') }}：</strong>{{ selectedCase.clientName }}</p>
              <p><strong>{{ $t('cases.caseCard.completionDate') }}：</strong>{{ selectedCase.completionDate }}</p>
              <p><strong>{{ $t('cases.caseDetail.projectScale') }}：</strong>{{ selectedCase.projectScale }}</p>
              <p><strong>{{ $t('cases.caseCard.satisfaction') }}：</strong>{{ selectedCase.satisfaction }}%</p>
            </div>
          </div>
        </div>
        
        <div class="detail-content">
          <h3>{{ $t('cases.caseDetail.background') }}</h3>
          <p>{{ selectedCase.background }}</p>
          
          <h3>{{ $t('cases.caseDetail.solution') }}</h3>
          <p>{{ selectedCase.solution }}</p>
          
          <h3>{{ $t('cases.caseDetail.results') }}</h3>
          <ul>
            <li v-for="(result, index) in selectedCase.results" :key="index">
              {{ result }}
            </li>
          </ul>
        </div>

        <div class="detail-gallery" v-if="selectedCase.gallery?.length">
          <h3>{{ $t('cases.caseDetail.gallery') }}</h3>
          <el-row :gutter="20">
            <el-col 
              v-for="(image, index) in selectedCase.gallery" 
              :key="index" 
              :xs="24" 
              :sm="12" 
              :md="8"
            >
              <el-image 
                :src="image" 
                :preview-src-list="selectedCase.gallery"
                fit="cover"
                class="gallery-image"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 筛选条件
const filters = reactive({
  industry: '',
  productType: '',
  region: ''
})

// 筛选选项
const industryOptions = [
  { value: 'food', label: t('cases.industryOptions.food') },
  { value: 'pharmacy', label: t('cases.industryOptions.pharmacy') },
  { value: 'cosmetics', label: t('cases.industryOptions.cosmetics') },
  { value: 'industrial', label: t('cases.industryOptions.industrial') }
]

const productTypeOptions = [
  { value: 'standup', label: t('cases.productTypeOptions.standup') },
  { value: 'zipper', label: t('cases.productTypeOptions.zipper') },
  { value: 'vacuum', label: t('cases.productTypeOptions.vacuum') },
  { value: 'custom', label: t('cases.productTypeOptions.custom') }
]

const regionOptions = [
  { value: 'asia', label: t('cases.regionOptions.asia') },
  { value: 'europe', label: t('cases.regionOptions.europe') },
  { value: 'america', label: t('cases.regionOptions.america') },
  { value: 'oceania', label: t('cases.regionOptions.oceania') }
]

// 案例数据
const cases = ref([
  {
    id: 1,
    title: t('cases.sampleCase.title'),
    clientName: t('cases.sampleCase.clientName'),
    industry: 'food',
    productType: 'standup',
    region: 'asia',
    image: '/images/cases/case1.jpg',
    description: t('cases.sampleCase.description'),
    completionDate: '2023-12',
    projectScale: t('cases.sampleCase.projectScale'),
    satisfaction: 98,
    background: t('cases.sampleCase.background'),
    solution: t('cases.sampleCase.solution'),
    results: [
      t('cases.sampleCase.results.0'),
      t('cases.sampleCase.results.1'),
      t('cases.sampleCase.results.2')
    ],
    gallery: [
      '/images/cases/case1-1.jpg',
      '/images/cases/case1-2.jpg',
      '/images/cases/case1-3.jpg'
    ]
  }
])

// 筛选后的案例列表
const filteredCases = computed(() => {
  return cases.value.filter(item => {
    if (filters.industry && item.industry !== filters.industry) return false
    if (filters.productType && item.productType !== filters.productType) return false
    if (filters.region && item.region !== filters.region) return false
    return true
  })
})

// 案例详情对话框
const dialogVisible = ref(false)
const selectedCase = ref(null)

// 显示案例详情
const showCaseDetail = (case_item) => {
  selectedCase.value = case_item
  dialogVisible.value = true
}

// 重置筛选
const resetFilters = () => {
  filters.industry = ''
  filters.productType = ''
  filters.region = ''
}
</script>

<style scoped>
.cases-container {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 18px;
}

.filter-section {
  margin-bottom: 40px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.cases-grid {
  margin-top: 40px;
}

.case-card {
  margin-bottom: 30px;
  cursor: pointer;
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.case-card:hover .case-image img {
  transform: scale(1.1);
}

.case-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.case-card:hover .case-overlay {
  opacity: 1;
}

.case-content {
  padding: 20px;
}

.case-content h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
}

.case-tags {
  margin-bottom: 15px;
}

.case-tags .el-tag {
  margin-right: 8px;
}

.case-description {
  color: #666;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case-footer {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 14px;
}

/* 案例详情对话框样式 */
.case-detail {
  padding: 20px;
}

.detail-header {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.detail-image {
  width: 400px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.detail-info {
  flex: 1;
}

.detail-tags {
  margin-bottom: 20px;
}

.detail-tags .el-tag {
  margin-right: 10px;
}

.detail-meta p {
  margin: 10px 0;
  color: #666;
}

.detail-content {
  margin-top: 30px;
}

.detail-content h3 {
  color: #333;
  margin: 20px 0 10px;
}

.detail-content p {
  color: #666;
  line-height: 1.6;
}

.detail-content ul {
  padding-left: 20px;
  color: #666;
}

.detail-gallery {
  margin-top: 30px;
}

.gallery-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .detail-header {
    flex-direction: column;
  }

  .detail-image {
    width: 100%;
    height: 200px;
  }

  .page-header h1 {
    font-size: 28px;
  }
}
</style> 